<template>
  <div :class="{ videoBox: true }" ref="videoBox">

    <div class="pageBox height_100 flex-start" :style="{left:pageBoxLeft + 'px'}">
      <div
        class="singlePage height_100"
        v-for="page in pageMembers"
        :key="page.pageNum"
      >
<!--        <div-->
<!--          class="testBox"-->
<!--          v-for="member in page.members"-->
<!--          :key="member"-->
<!--          :class="videoClass"-->
<!--        ></div>-->
         <personalVideo v-for="item in page.members" :key="item.id" :camera="item.camera" :voiced="item.voiced" :media-stream="item.stream" :id="item.id" :class="videoClass"></personalVideo>
      </div>
    </div>
    <div class="changePage width_100">
      <div class="btnbox flex-between">
        <img class="cp"  v-if="currentPage !== 1" src="@/assets/cfRoom/images/turnLast.png" alt="" @click="changePage('last')">
        <div></div>
        <img class="cp" v-if="currentPage !== pageMembers.length" src="@/assets/cfRoom/images/turnNext.png" alt="" @click="changePage('next')">
      </div>
    </div>
  </div>
</template>

<script>
import personalVideo from './personalVideo'
export default {
  data () {
    return {
      currentPage: 1,
      pageBoxLeft: 0
    }
  },
  computed: {
    // 会议成员列表
    cf_members () {
      return this.$store.getters['conferenceRoom/cf_members']
    },
    videoClass () {
      let className = ''
      switch (this.cf_members.length) {
        case 1:
          className = 'single'
          break
        case 2:
          className = 'double'
          break
        default:
          className = 'more'
          break
      }
      return className
    },
    pageMembers () {
      const list = []
      const membersLen = this.cf_members.length
      const pageSize = 4
      if (membersLen > 4) {
        const pages = Math.floor(membersLen / 4)
        for (let i = 0; i < pages; i++) {
          list.push({
            pageNum: i + 1,
            members: this.cf_members.slice(i * pageSize, (i + 1) * pageSize)
          })
        }
        list.push({
          pageNum: pages + 1,
          members: this.cf_members.slice(
            pages * pageSize,
            this.cf_members.length
          )
        })
      } else {
        list.push({
          pageNum: 1,
          members: this.cf_members.slice(
            0,
            this.cf_members.length
          )
        })
      }
      return list
    }
  },
  components: {
    personalVideo
  },
  methods: {
    changePage (dirt) {
      if (this.$refs.videoBox) {
        const moveLeft = this.$refs.videoBox.clientWidth
        if (dirt === 'next') {
          this.pageBoxLeft -= moveLeft
          this.currentPage++
        } else {
          this.pageBoxLeft += moveLeft
          this.currentPage--
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.videoBox {
  position: relative;
  width: 83.13%;
  // padding: 12px 12px 0;
  height: 100%;
  float: left;
    overflow: hidden;
  .testBox {
    background-color: skyblue;
  }
  .changePage{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    .btnbox{
      img{
        width: 48px;
        height: 48px;
      }
    }
  }
  .pageBox {
    position: absolute;
    left: 0;
    top: 0;
    transition: 1s all;
    .singlePage {
      width: 1596px;
      // min-width: 1176px;
      padding: 12px;
      position: relative;
      .single {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .double {
        display: inline-block;
        font-size: 0;
        width: 48.872%; //定位忽略了父盒子的padding
        height: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        &:first-child {
          left: 12px;
        }

        &:last-child {
          right: 12px;
        }
      }
      .more {
        width: 49.618%;
        height: 49.232%;
        float: left;
        margin-right: 12px;
        &:first-child {
          margin-bottom: 12px;
        }
        &:nth-child(2) {
          margin-bottom: 12px;
        }
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
